<template>
  <div>
    <div id="zpjc-pie" :style="{ width: '100%', height: '250px' }"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
const colorList = ['#F96E86', '#5AB1EF']
let echartData = [
  { value: 0, name: '抓拍正常' },
  { value: 0, name: '抓拍异常' },
]
export default {
  props: ['zpjcPis'],
  data() {
    return {}
  },
  watch: {
    zpjcPis: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler: function (newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  created() {},
  mounted() {
    echartData = this.zpjcPis
    var myChart = echarts.init(document.getElementById('zpjc-pie'))
    // const option = {
    //   backgroundColor: '#fff',
    //   title: {
    //     text: `抓拍设备状况(台) {a|快照时间:${this.filters()}}`,
    //     top: 0,
    //     left: 0,
    //     textStyle: {
    //       fontSize: 16,
    //       color: '#2F3033',
    //       rich: {
    //         a: {
    //           fontSize: 12,
    //           color: '#333',
    //         },
    //       },
    //     },
    //   },
    //   legend: {
    //     show: true,
    //     orient: 'horizontal',
    //     icon: 'circle',
    //     left: '80%',
    //     itemGap: 15,
    //     textStyle: {
    //       // rich: {
    //       //   0: {
    //       //     color: colorList[0],
    //       //     fontSize: 14,
    //       //   },
    //       //   1: {
    //       //     color: colorList[1],
    //       //     fontSize: 14,
    //       //   },
    //       // },
    //     },
    //     formatter: function (name) {
    //       for (let i = 0; i < echartData.length; i++) {
    //         if (name === echartData[i].name) {
    //           return name + ' ' + echartData[i].value
    //         }
    //       }
    //     },
    //   },
    //   tooltip: {
    //     trigger: 'item',
    //     formatter: '{b} : {c} ({d}%)',
    //   },
    //   series: [
    //     {
    //       type: 'pie',
    //       radius: '80%',
    //       selectedMode: 'single',
    //       selectedOffset: 10,
    //       clockwise: true,
    //       center: ['50%', '50%'],
    //       color: ['#5AB1EF', '#F96E86'], // 蓝色,粉色
    //       data: echartData.sort(function (a, b) {
    //         return a.value - b.value
    //       }),
    //       roseType: 'radius',
    //       label: {
    //         normal: {
    //           formatter: ['{b|{b}{d}%}', '{c|{c}台}'].join('\n'),
    //           rich: {
    //             b: {
    //               color: '#646566',
    //               fontSize: 14,
    //               height: 30,
    //             },
    //             c: {
    //               color: '#333333',
    //               fontSize: 14,
    //               lineHeight: 5,
    //             },
    //           },
    //         },
    //       },
    //       itemStyle: {
    //         borderWidth: '5',
    //         borderColor: '#FFF',
    //       },
    //     },
    //   ],
    // }
    const option = {
      backgroundColor: '#fff',
      title: {
        text: `抓拍设备状况(台) {a|快照时间:${this.filters()}}`,
        top: 0,
        left: 0,
        textStyle: {
          fontSize: 16,
          color: '#2F3033',
          rich: {
            a: {
              fontSize: 12,
              color: '#333',
            },
          },
        },
      },
      color: colorList,
      legend: {
        show: true,
        orient: 'horizontal',
        icon: 'circle',
        left: '80%',
        itemGap: 15,
        textStyle: {
          // rich: {
          //   0: {
          //     color: colorList[0],
          //     fontSize: 14,
          //   },
          //   1: {
          //     color: colorList[1],
          //     fontSize: 14,
          //   },
          // },
        },
        formatter: function (name) {
          for (let i = 0; i < echartData.length; i++) {
            if (name === echartData[i].name) {
              return name + ' ' + echartData[i].value
            }
          }
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      series: [
        {
          type: 'pie',
          top: 25,
          bottom: 3,
          radius: ['0', '75%'],
          selectedMode: 'single',
          selectedOffset: 10,
          labelLine: {
            normal: {
              length: 25,
              length2: 15,
              lineStyle: {
                type: 'dashed',
              },
            },
          },
          label: {
            normal: {
              formatter: (params) => {
                return params.name + params.value
              },
              rich: {
                a: {
                  color: '#ffffff',
                  fontSize: 14,
                  height: 16,
                  align: 'center',
                },
              },
            },
          },
          data: echartData,
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
  methods: {
    getShuju(valss) {
      // this.zpjcPis
      const echartData = valss
      const option = {
        backgroundColor: '#fff',
        title: {
          text: `抓拍设备状况(台) {a|快照时间:${this.filters()}}`,
          top: 0,
          left: 0,
          textStyle: {
            fontSize: 16,
            color: '#2F3033',
            rich: {
              a: {
                fontSize: 12,
                color: '#333',
              },
            },
          },
        },
        legend: {
          show: true,
          orient: 'horizontal',
          icon: 'circle',
          left: '80%',
          itemGap: 15,
          textStyle: {
            // rich: {
            //   0: {
            //     color: colorList[0],
            //     fontSize: 14,
            //   },
            //   1: {
            //     color: colorList[1],
            //     fontSize: 14,
            //   },
            // },
          },
          formatter: function (name) {
            for (let i = 0; i < echartData.length; i++) {
              if (name === echartData[i].name) {
                // return name + '({' + i + '|' + echartData[i].value + '})'
                return name + ' ' + echartData[i].value
              }
            }
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            selectedMode: 'single',
            selectedOffset: 10,
            clockwise: true,
            center: ['50%', '50%'],
            color: colorList,
            data: echartData.sort(function (a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              normal: {
                formatter: ['{b|{b}{d}%}', '{c|{c}台}'].join('\n'),
                rich: {
                  b: {
                    color: '#646566',
                    fontSize: 14,
                    height: 30,
                  },
                  c: {
                    color: '#333333',
                    fontSize: 14,
                    lineHeight: 5,
                  },
                },
              },
            },
            itemStyle: {
              borderWidth: '5',
              borderColor: '#FFF',
            },
          },
        ],
      }
      var myChart = echarts.init(document.getElementById('zpjc-pie'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        //   让我们图表调用resize方法
        myChart.resize()
      })
    },
    filters() {
      const dt = new Date()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, 0)
      const d = (dt.getDate() + '').padStart(2, 0)
      const hh = (dt.getHours() + '').padStart(2, 0)
      const mm = (dt.getMinutes() + '').padStart(2, 0)
      const ss = (dt.getSeconds() + '').padStart(2, 0)
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    },
  },
}
</script>
<style lang="scss"></style>
